<template>
	<scroll-view  :scroll-y="true" :class="pageClass" :style="pageStyle" v-if="pageReady">
		<view class="index">
			<moxi-nav :set="navSet"></moxi-nav>
			<view class="lists" >
				<view class="list" v-for="(item, index) in listsData" :key="index" @click="goDetail(item)">
					<view class="top">
						<view class="left">{{item.name}}</view>
						<!-- <view class="right">{{item.province}}-{{item.city}}</view> -->
					</view>
					<view class="middle">
						<view class="top" style="font-size: 13px;">项目时间：{{$u.timeFormat(item.start_time, 'yyyy年mm月dd日')}}</view>
					</view>
					<view class="footer">
						<view class="left" style="color: #666;">{{item.province}}-{{item.city}}</view>
						<view class="right" style="display: flex;flex-direction: row;color: #666;" 
						@click.stop="del(item.id)">
							<u-icon name="trash" color="#ff5500" size="21"></u-icon>
						</view>
					</view>
				</view>
				<u-divider style="padding-bottom: 10px;" text="没有更多内容了" ></u-divider>
			</view>
		</view>
			<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				listsData: [],
			}
		},
		onLoad() {
			this.get()
		},
		methods: {
			goDetail(list) {
				this.navto('pages/plugin/zx/projectListDetail?id=' + list.pid)
			},
			get() {
				let self = this
				this.moxiPost('/plugin/zx/user/project/my_collect',{},
				 function(data) {
					self.listsData = data.data;
				})
			},
			del(id){
				let self = this;
				uni.showModal({
					title: '确认要删除该收藏吗？',
					content: '删除后无法恢复，请谨慎操作！',
					success: function (res) {
						if (res.confirm) {
							self.moxiPost('/plugin/zx/user/project/del_collect', {id:id}, function(data) {
								self.msg(data.hint);
								self.get()
							})
						
						} else if (res.cancel) {
							
						}
					}
				});
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		// width: 94%;
		// margin: 10px auto;
		padding: 12px;
		background-color: #f5f5f5;
	}
	.lists {
		width: 94%;
		margin: 10px auto;

		.list {
			margin-bottom: 10px;
			padding: 10px;
			background-color: #fff;
			// border-bottom: 1px #eee dashed;
			box-shadow: 0 0 5px #ccc;
			border-radius: 4px;

			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 16px;
					font-weight: bold;
				}

				.right {
					font-size: 12px;color: #666;
				}
			}

			.middle {
				margin: 10px 0;
				font-size: 14px;
				color: #8f8f8f;

				.bottom {
					max-width: 70%;
					height: 24px;
					margin-top: 10px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;

					.tab {
						margin-right: 6px;
						padding: 4px;
						border-radius: 4px;
						background-color: #f2f2f2;
						font-size: 12px;

						&:nth-last-of-type(1) {
							margin-right: 0;
						}
					}
				}
			}

			.footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;

				.right {
					color: #8f8f8f;
				}
			}
		}
	}

	.index {
	
		background-color: #f2f2f2;
		overflow: auto;
	}
</style>